<template>
  <CardList :dataList="danceList"></CardList>
  <div class="load-more" @click="loadMore">加载更多</div>
</template>

<script setup lang="ts">
  import CardList from '../CardList/index.vue';
  import {onMounted, ref} from 'vue'

  import {ElMessage} from "element-plus";

  import DanceListApi from '@/api/rescources/DanceList';
  const activeName = ref('first')
  const pageSize = ref(20);
  const pageNum = ref(0);
  const localCache = ref(0);
  const danceList = ref<any>([])
  const loadList = ref<any>([])
  // 加载更多数据
  const loadMore = async () => {
    try {
     let result = await DanceListApi.getLoadList(pageSize.value,pageNum.value,localCache.value);
     loadList.value = result.content
    } catch(error) {
      ElMessage.error('获取更多数据列表失败')
      console.error(error)
    };
    //组装数据
    setTimeout(() => {
      danceList.value = danceList.value.concat(loadList.value)
    })
  }

  const getList = async ()  => {
    try {
      let result = await DanceListApi.getDanceList("5858c60a-7a7c-4593-869e-3019e126c4f2",pageSize.value,pageNum.value,localCache.value)
      if(pageNum.value>0) {
        pageNum.value += 1
        localCache.value += 20
        loadMore()
      }else {
        danceList.value = result.content
      }

    } catch (error) {
      console.error(error);
      ElMessage.error('获取舞蹈列表数据失败')
    };

  };

  onMounted(() => {
    getList();

  })
</script>

<style scoped>
.load-more {
  width: 140px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #82858e;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}
</style>
